/** Styles for PDBe Molstar (in addition to styles imported from core Molstar) */

// Color constants must be imported before importing this file
// (from molstar/lib/mol-plugin-ui/skin/*.scss or molstar/lib/mol-plugin-ui/skin/colors/*.scss)

@use 'molstar/lib/mol-plugin-ui/skin/base/_vars.scss' as vars;

.msp-plugin {
    ::-webkit-scrollbar-thumb {
        background-color: #80808080;
        border-radius: 10px;
        border: solid 1px transparent;
        background-clip: content-box;
    }

    .msp-plugin-init-error {
        color: #808080;
    }

    .msp-layout-static {
        container-type: size; // define container to reference in .msp-viewport-controls-panel-controls
    }

    .msp-viewport-controls-panel .msp-viewport-controls-panel-controls {
        max-height: calc(100cqh - 41px - 24px - 10px); // 100cqh = viewport container, 41px = control buttons offset, 24px = header, 10px = space below
    }

    // Avoid wraping headers in left panel help
    .msp-simple-help-section {
        overflow: hidden;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }

    .msp-control-group-header button {
        overflow: hidden;
        text-wrap: nowrap;
        text-overflow: ellipsis;
    }


    .pdbemolstar-custom-control-viewport-top-left {
        float: left;

        &:not(:empty) {
            margin-right: vars.$control-spacing;
        }
    }

    .pdbemolstar-viewport-top-center-controls {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: calc(54px + 2 * vars.$control-spacing); // 54px = PDBe logo box
        pointer-events: none;

        >* {
            margin-top: vars.$control-spacing;
            pointer-events: auto;
            max-width: 100%;
        }
    }


    .pdbemolstar-overlay {
        z-index: 1000;
        position: absolute;
        inset: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;

        .pdbemolstar-overlay-box {
            width: 25%;
            height: 25%;
        }

        svg.pdbe-animated-logo {
            background-color: transparent;
            width: 100%;
            height: 100%;
            opacity: 80%;

            .path-fg {
                stroke-dasharray: 1812 250;
                stroke-dashoffset: -250;
                animation: dash linear normal infinite;
                animation-duration: 5s;
                animation-delay: 1s;
            }

            @keyframes dash {
                0% {
                    stroke-dashoffset: 1812;
                }

                80% {
                    stroke-dashoffset: -250;
                }

                100% {
                    stroke-dashoffset: -250;
                }
            }
        }
    }


    .pdbemolstar-state-gallery-controls {
        overflow-x: hidden;
        word-wrap: break-word; // necessary for wrapping oligonucleotide sequences

        &:focus-visible {
            outline: none;
        }

        .pdbemolstar-state-gallery-state-button {
            height: 24px;
            line-height: 24px;
            padding-inline: 5px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;

            .msp-icon {
                margin-right: 3px;
            }
        }

        .pdbemolstar-state-gallery-legend {
            margin-block: 8px;

            .image_legend_li {
                margin-left: 16px;
            }

            .highlight {
                font-weight: bold;
            }
        }
    }

    .pdbemolstar-state-gallery-title-box {
        width: 500px;
        max-width: 100%;
        background-color: vars.$msp-form-control-background;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;

        .msp-btn-icon {
            background-color: transparent;
            height: 100%;
        }

        .pdbemolstar-state-gallery-title {
            margin: 5px;
            min-height: 2.9em; // Enough for one normal line + one <small> line
            display: flex;
            flex-direction: row;
            align-items: center;
            text-align: center;
            font-weight: bold;

            .pdbemolstar-state-gallery-title-icon {
                width: 1.2em; // width of msp-material-icon
            }

            .pdbemolstar-state-gallery-title-text {
                margin-right: 1.2em; // width of msp-material-icon
                padding-inline: 4px;
            }
        }
    }

}